<script setup>
import { ref, onMounted } from 'vue'
import { GetOrderAllDataAPI } from '@/apis/order';
import { formatDateTime } from '@/utils/dayjs';

const tableData = ref()
const getData = async () => {
  const result = await GetOrderAllDataAPI(3)
  console.log(result);
  tableData.value = result.map(item => {
    item.payTime = formatDateTime(item.payTime)
    return item
  })
}

const loading = ref(true)
onMounted(async() => {
  await getData()
  loading.value = false
})
</script>

<template>
          <el-table 
            :data="tableData"
            v-loading="loading"
            element-loading-text="加载中..."
          >
            <el-table-column prop="orderId" label="订单号" width="80" />
            <el-table-column prop="bookName" label="购买图书" width="80" />
            <el-table-column prop="payMoney" label="支付金额" width="80" />
            <el-table-column prop="payTime" label="支付时间" width="120" />
            <el-table-column prop="user" label="购买人" />
            <el-table-column prop="phone" label="联系方式" />
            <el-table-column prop="finish" label="收货状态" >
              <template #default="{row}">
                <el-tag type="warning" v-if="row.finish === 0">未收货</el-tag>
                <el-tag type="success" v-else>已收货</el-tag>
              </template>
            </el-table-column>
          </el-table>
</template>